import React, { useState, useEffect } from 'react';
import "@/views/Index/Users/Users.scss"
import { Table, Button, TablePaginationConfig, notification, Input, Breadcrumb, Tag, Form } from 'antd'
import { useNavigate } from 'react-router-dom';
import type { ColumnsType } from 'antd/es/table'
import { FormOutlined, DeleteOutlined } from '@ant-design/icons';
import { admin_list, admin_del } from '../../../api/api';
interface Props {

}

interface DataType {
    user: string;
    nickname: string;
    name: string;
    phone: string;
    role: string;
    key: string;
}
function Users(props: Props) {
    //决定了每一列渲染什么数据
    const columns: ColumnsType<DataType> = [
        {
            title: '序号',
            dataIndex: 'index',
            key: 'index',
            render: (text, record, index) => `${index + 1}`
        },
        {
            title: '账号',//表格列的名字(显示在表格头上)
            key: 'adminname',
            dataIndex: 'adminname',//数据对应的属性名

        },
        {
            title: '权限',
            dataIndex: 'role',
            key: 'role',
            render: (_, record, key) => (
                record.role == '1' ?
                    <Tag color="#87d068">超级管理员</Tag>
                    :
                    <Tag color="#108ee9">管理员</Tag>

            )
        },
        {
            title: '角色',
            dataIndex: 'role',
            key: '_id',
            render: (_, record, key) => (
                record.role == '1' ?
                    <span>
                        超级管理员
                    </span>
                    :
                    <span>
                        管理员
                    </span>

            )

        },
        {
            title: '操作',
            key: 'action',
            render: (_, record, key) => (
                <>
                    <FormOutlined className='edit' onClick={() => { routerEdit(record) }} />
                    <DeleteOutlined className='del' onClick={() => { delUser(record) }} />
                </>
            )
        }
    ]
    //定义动画效果
    var [loading, setLoading] = useState(false)
    var [userlist, setUserlist] = useState([])
    var navigate = useNavigate()
    useEffect(() => {
        admin_list().then((res) => {
            console.log(res.data);
            res.data.data.map((item: any) => {
                item.key = item.id
            })
            setUserlist(res.data.data)

        })
    }, [])
    // 点击跳转添加管理员
    const routerAdd = () => {
        navigate('/index/adduser')
    }
    // 点击删除管理员
    const delUser = (record: any) => {
        admin_del({ adminid: record.adminid }).then((res) => {
            if (res.data.code == 200) {
                notification.success({ message: '删除该管理员成功' })
                admin_list().then((res) => {
                    setUserlist(res.data.data)
                })
            } else {
                notification.error({ message: res.data.message })
            }

        })
    }
    // 点击跳转编辑管理员页面
    const routerEdit = (record: any) => {
        var newrecord = JSON.stringify(record)
        navigate({ pathname: '/index/edituser', search: `?id=${newrecord}` })
    }
    return (
        <div className='userlist'>
            <Breadcrumb style={{ margin: '16px 0' }}>
                <Breadcrumb.Item href='/index'>首页</Breadcrumb.Item>
                <Breadcrumb.Item>账号管理</Breadcrumb.Item>
                <Breadcrumb.Item>管理员列表</Breadcrumb.Item>
            </Breadcrumb>
            <div className="opet">
                {/* <Search style={{ width: 300, marginRight: 20 }} placeholder="输入员工姓名"  enterButton /> */}
                <Button type="primary" onClick={routerAdd}>添加管理员 +</Button>
            </div>
            {/* 表格组件 */}
            {/* columns 表格每一列如何渲染 */}
            {/* dataSource 表格的数据源 */}
            <Table columns={columns} loading={loading} dataSource={userlist} />
        </div>
    );
}

export default Users;